<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<body>
<!--
    1. 输入手机号，点击发送验证码（绑定点击事件）
    2. 发送验证码点击后， 设置文本框和按钮禁用；  在控制台输出随机验证码   btn.disabled = true
    3. 按钮显示内容为  重新发送(60)  ; 60秒倒计时   btn.value = "按钮上的文本"
    4. 倒计时结束后，设置按钮文本为 重新发送， 设置文本框和按钮可用
-->
<input id="phone" type="text" placeholder="请输入手机号"> <input id="btn" type="button" value="发送验证码">


</body>
<script>
    let btn = document.getElementById("btn");
    let phone = document.getElementById("phone");
    let time = 6;
    btn.addEventListener("click", function() {
        let value = phone.value;
        if(value == null || value.trim().length == 0){
            alert("请输入手机号");
            return;
        }
        //设置文本框和按钮禁用
        btn.disabled = true;
        phone.disabled = true;
        //控制台输出随机验证码
        let r = parseInt(Math.random() * 9000 + 1000);
        console.log(r);


        btn.value = "重新发送("+time+")";
        let timeInterval = window.setInterval(function(){
            time -- ;
            //倒计时结束后，设置按钮文本为 重新发送， 设置文本框和按钮可用
            if(time <= 0){
                //清除定时器
                window.clearInterval(timeInterval);
                btn.value = "重新发送";
                btn.disabled = false;
                phone.disabled = false;
                time = 6;
                return;
            }

            btn.value = "重新发送("+time+")";
        }, 1000);
    })
</script>

</html>